<template>
	<view >
		<view class="change">
			<view v-for="(item,index) in texts" :key="index" @click="check(index)" class="school_text">
				<view class="sch" :class="active==index? 'sch':'sch1'">{{item}}</view>
				<view class="hengx" v-if="active==index"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "wzh-change",
		props: {
			texts: {
				type: Array,
				default: function() {
					return ['aaa', 'bbb'];
				},
			},
			text:{
				type:String,
				default:'',
			}
		},
		data() {
			return {
				active: '0',
				input_data: ''
			}
		},
		methods: {
			check(active) {
				if (this.active != active) {
					this.active = active
				}

				//绑定组件的事件
				this.$emit('onClick', this.active);
			},
		}
	}
</script>

<style>
	.change {
		display: flex;
	}

	.hengx {
		width: 80rpx;
		height: 8rpx;
		background-color: rgb(59, 115, 246);
		margin: auto;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.sch {
		font-size: 30rpx;
		color: rgb(59, 115, 246);
		font-weight: 1000rpx;
	}

	.sch1 {
		font-size: 30rpx;
		color: rgb(102, 102, 102);
	}

	.school_text {
		margin-top: 0rpx;
		margin-left: 35rpx;
		padding-bottom: 30rpx;
	}
	/* 按钮样式 */
	.submit_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		background-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.cancel_but {
		border-radius: 90rpx;
		border-width: 1rpx;
		border-style: solid;
		border-color: #3b73f6;
		text-align: center;
		height: 80rpx;
		width: 335rpx;
		line-height: 80rpx;
		color: #3b73f6;
		font-size: 30rpx;
	}
</style>
